<!--  -->
<template>
  <div class="info">
    <div class="chanpin">产品介绍</div>
    <div class="one">
      <p>视频</p>
      <p>光线暗一点，拿起手机，开拍。</p>
      <p>
        你可以用Ipone 12
        拍摄、剪辑和回放杜比视界视频，在绚丽的OLED屏上慢慢欣赏呼之欲出的色彩和细节。
      </p>
      <img src="../../../assets/img/商品详情-(5)_02.gif" alt="" />
      <p>夜间模式演示摄影功能</p>
      <p>配合三脚架，助你捕捉光轨和动态光景</p>
    </div>
    <div class="two">
      <p>摄影</p>
      <p>低光摄影，迎来高光时刻。</p>
      <p>
        所有摄像头均支持夜间模式，在暗光下拍照，甚至自拍，都能获得更丰富的细节。
      </p>
      <img src="../../../assets/img/商品详情-(6)_02.gif" alt="" />
    </div>
    <div class="three">
      <p>A14 仿生</p>
      <p>芯片届的新篇章</p>
      <p>
        A14
        仿生芯片再创苹果速度新高。它配备16核神经网络引擎，每秒可完成数十万亿次运算，同时，它的能效超高，带来出色的电池续航。
      </p>
      <img src="../../../assets/img/商品详情-(7)_02.gif" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.details {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  overflow: hidden;
}
.chanpin {
  width: 100%;
  height: px2rem(50);
  background: #f8f8f8;
  font-size: px2rem(18);
  font-weight: bold;
  line-height: px2rem(50);
  padding-left: 5%;
}
.one {
  padding-left: px2rem(14);
  :nth-child(1) {
    margin-top: px2rem(10);
    font-size: px2rem(16);
    color: #666666;
  }
  :nth-child(2) {
    margin: px2rem(14) 0;
    font-size: px2rem(18);
    font-weight: bold;
    color: #333;
  }
  :nth-child(3) {
    width: 92%;
    flex-wrap: wrap;
    font-size: px2rem(14);
    color: #333333;
    margin-bottom: px2rem(5);
  }

  :nth-child(5) {
    margin: px2rem(14) 0;
    font-size: px2rem(18);
    font-weight: bold;
    color: #333;
  }
  :nth-child(6) {
    font-size: px2rem(14);
    margin-bottom: px2rem(10);
    color: #333333;
  }
}
.two {
  background: #f8f8f8;
  padding-left: px2rem(14);
  width: 100%;
  height: px2rem(400);
  :nth-child(1) {
    margin-top: px2rem(10);
    font-size: px2rem(16);
    color: #666666;
  }
  :nth-child(2) {
    width: 90%;
    margin: px2rem(14) 0;
    font-size: px2rem(18);
    font-weight: bold;
    color: #333;
  }
  :nth-child(3) {
    font-size: px2rem(14);
    color: #333333;
    margin-bottom: px2rem(5);
  }
}
.three {
  padding-left: px2rem(14);
  width: 100%;
  background: #ffffff;
  :nth-child(1) {
    margin-top: px2rem(10);
    font-size: px2rem(16);
    color: #666666;
  }
  :nth-child(2) {
    margin: px2rem(14) 0;
    font-size: px2rem(18);
    font-weight: bold;
    color: #333;
  }
  :nth-child(3) {
    width: 90%;
    flex-wrap: wrap;
    font-size: px2rem(14);
    color: #333333;
    margin-bottom: px2rem(5);
  }
}
</style>
